<template>
  <div>
    <div class="login-container">

      <p class="login-title">机票预订管理系统</p>

      <div class="login-form">
        <el-input prefix-icon="el-icon-user" class="login-form-username" v-model="username" placeholder="用户名"></el-input>
        <el-input prefix-icon="el-icon-unlock" class="login-form-password" show-password v-model="password" placeholder="密码"></el-input>
        <el-button class="login-form-login-button" @click="login">登录</el-button>
      </div>
    </div>

  </div>
</template>

<script>

  import {login} from "../api/login";
  import {Message} from "element-ui";

  export default {
    name: 'Login',
    data () {
      return {
        username:'',
        password:'',
      }
    },
    methods:{

      login() {
        const _this = this
        login({
          username:this.username,
          password:this.password
        }).then(function (response) {
          console.log(response)
          Message({
            message: response.data.message,
            type: 'success',
            duration: 2 * 1000
          })
           localStorage.setItem("user",JSON.stringify(response.data.obj))
          _this.$router.push("/mainPage")
        })
      }
    }
  }
</script>

<style>

  *{
    padding: 0;
    margin: 0;
  }

  .login-container .el-input__inner{
    border: 1px solid #607D8B !important;
  }

  .login-title{
    position: absolute;
    letter-spacing: 4px;
    font-size: 25px;
    color: white;
    left: 42%;
    top: 10%;
  }


  .login-form-login-button{
    color: white;
    font-size: 20px;
    font-family: YouYuan;
    letter-spacing: 5px;
    background-color: #607D8B;
    position: absolute;
    width: 65%;
    height: 15%;
    top:70%;
    left: 17%;
  }


  .login-form{
    width: 40%;
    height: 50%;
    background-color: white;
    position: absolute;
    right: 30%;
    top: 20%;
    border-radius: 10px;
    box-shadow:  11px 11px 37px #384955,
    -11px -11px 37px #394b57;
  }


  .login-form-username{
    position: absolute;
    width: 65%;
    height: 15%;
    top:20%;
    left: 17%;
  }

  .login-form-password{
    position: absolute;
    width: 65%;
    height: 15%;
    top:45%;
    left: 17%;
  }


  .login-container{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: #607D8B;
  }



</style>
